<template>
	<view>
		<view class="dhl" style="background-color: #E23C63;"></view>
		<view class="topbar box dis_f_c_c" style="background-color: #E23C63;">
			悬赏
			<!-- <image class="top_jt" src="../../static/icon/back.png" mode="aspectFit" @click="go_back"></image> -->
		</view>
		<view class="r_btn dis_f_l_c">
			<image src="../../static/xuan_shang/xfj.png" mode=""></image>
			<view @click="go_fb">发布悬赏</view>
		</view>
		<view class="s_banxin dis_f_c_c">
			<view class="search dis_f_l_c">
				<image src="../../static/icon/search.png" mode=""></image>
				<u-input v-model="search_text" height="32" placeholder="请输入关键词" @input='search'></u-input>
			</view>
		</view>
		<view class="rm_tj dis_f_sb_c">
			<image class="left" src="../../static/xuan_shang/rmtj.png" mode=""></image>
			<view class="dis_f_l_c">
				<view style="margin-right: 6rpx;" @click="rm_list()">查看更多</view>
				<image class="right" src="../../static/index/right.png" mode=""></image>
			</view>
		</view>
		<view class="content dis_f_co">
			<view class="bg"></view>
			<view style="padding: 0 24rpx;width: 750rpx;position: absolute;">
				<view class="top_tj dis_f_l_c">
					<view class="tj_xx dis_f_co_c_c" v-for="(item,index) in hot_lists" @click="info(item.id)">
						<image class="tx" :src="item.image" mode=""></image>
						<view class="title">{{item.title}}</view>
						<view class="dis_f_c_c tj_btn">
							<view class="an_niu dis_f_c_c">{{item.tag_name}}</view>
							<!-- <view class="an_niu dis_f_c_c">云闪付</view> -->
						</view>
						<view class="shang dis_f_l_c">
							<image src="../../static/xuan_shang/shang.png" mode="aspectFill"></image>
							<view class="num">{{item.task_money}}</view>
						</view>
					</view>

				</view>
				<image src="../../static/xuan_shang/xs_img1.png" class="mid_img"></image>
				<view style="margin-bottom: 34rpx;">
					<u-tabs :list="list" bg-color="none" active-color="#222222" bar-height="4" inactive-color="#BBBBBB"
						:is-scroll="true" :current="current" @change="change"></u-tabs>
				</view>
				<view class="b_list dis_f" v-if="lists !='' " v-for="(item,index) in lists" @click="info(item.id)">
					<image class="tx" :src="item.image" mode=""></image>
					<view class="dis_f_co" style="width: calc(100% - 156rpx)">
						<view class="dis_f_sb_t" style="width: 100%;">
							<view class="title">{{item.title}}</view>
							<view class="dis_f_l_c">
								<image class="shang" src="../../static/xuan_shang/shang.png" mode="aspectFill"></image>
								<view class="num">{{item.task_money}}</view>
							</view>
						</view>
						<view class="dis_f_l_c" style="margin-bottom: 12rpx;">
							<view class="h_btn dis_f_c_c" style="margin-right: 12rpx;">{{item.tag_name}}</view>
							<!-- <view class="h_btn dis_f_c_c">云闪付</view> -->
						</view>
						<view class="h_text">{{item.task_num_success}}人已赚 剩余{{item.task_num_surplus}}人</view>
					</view>

				</view>
				<view v-if="lists ==''"><u-empty style="padding-top: 80rpx;" text="该分类暂无数据" mode="list"></u-empty></view>
				<view style="padding-bottom: 120rpx;">
					<u-loadmore :status="status" v-if="lists != ''"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search_text: '',
				list: [{
						name: '全部'
					}, {
						name: '下载注册'
					}, {
						name: '砍价红包',
					},
					{
						name: '关注投票',
					},
					{
						name: '分享点赞',
					}
				],
				current: 0,
				hot_lists: [],
				lists: [],
				limit: 10,
				page: 1,
				status: 'nomore',
				fy_id:0,
				zys:0,
			};
		},
		onLoad() {
			this.$.ajax(1, 'post', 'task/xuanshang_cate', {}, (res) => {
				if (res.code == 1) {
					res.list.unshift({
						id: 0,
						name: '全部'
					});
					this.list = res.list;
				}
			})
		},
		onShow(){
			this.page = 1;
			this.lists = [];
			this.get_index(0, this.search_text);
		},
		methods: {
			search() {
				var xiabiao = this.current;
				this.get_index(this.list[xiabiao].id, this.search_text);
			},
			change(index) {
				this.page = 1
				this.current = index;
				this.fy_id = this.list[index].id
				this.get_index(this.list[index].id, this.search_text);
				
			},
			go_fb() {
				this.$.open('/pages/xuan_shang/fb')
			},
			info(id) {
				this.$.open('/pages/xuan_shang/xs_xq?id=' + id)
			},
			rm_list() {
				console.log(222);
				this.$.open('/pages/xuan_shang/rm_tj')
			},
			get_index (tag_id,search) {
				this.$.ajax(1, 'post', 'task/index', {
					limit: this.limit,
					page: this.page,
					tag_id: tag_id,
					keyword: search,
				}, (res) => {
					if (res.code == 1) {
						this.lists = res.data;
						// console.log(typeof this.lists)
						this.hot_lists = res.hot_data;
						this.zys = res.pagecount;
						if(res.pagecount <2){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
						}
					}
				})
			},
		},
		onReachBottom() {
			console.log(this.zys)
			if(this.page+1 <= this.zys){
				this.status = 'loading';
				this.page = ++this.page;
				console.log(this.page)
				this.$.ajax(1, 'post', 'task/index', {
					limit: this.limit,
					page: this.page,
					tag_id: this.fy_id ,
					keyword: this.search_text,
				}, (res) => {
					if (res.code == 1) {
						this.zys = res.pagecount
						if(res.data != ''){
							res.data.forEach((item,index)=>{
								this.lists.push(item);
							})
							console.log(this.lists)
							
							// console.log(222)
						}
						// this.hot_lists = res.hot_data;
					}
				})
			}else{
				this.status = 'nomore';
				return;
			}
		
		},
		onPullDownRefresh(){
			this.lists = []
			this.$.ajax(1, 'post', 'task/index', {
				limit: this.limit,
				page: this.page,
				tag_id: this.fy_id ,
				keyword: this.search_text,
			}, (res) => {
				if (res.code == 1) {
					this.zys = res.pagecount
					if(res.data != ''){
						res.data.forEach((item,index)=>{
							this.lists.push(item);
						})
						console.log(this.lists)
						
						// console.log(222)
					}
					// this.hot_lists = res.hot_data;
				}
			})
			
			setTimeout(function () {
			            uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.dhl {
		// position: absolute;
		
		width: 100%;
		height: var(--status-bar-height);
		position: fixed;
		top: 0;
		z-index: 999;
	}
	
	.topbar {
		width: 100%;
		z-index: 999;
		height: 44px;
		position: fixed;
		top: var(--status-bar-height);
		font-size: 34rpx;
		color: #fff;
		font-weight: bold;
		// background-image: url(../../static/index/bg.png);
		// padding: 0 0 26rpx 0rpx;
	
		.top_jt {
			width: 18rpx;
			height: 32rpx;
			position: absolute;
			left: 40rpx;
			top: 28rpx;
		}
	}
	.r_btn {
		position: fixed;
		z-index: 999;
		top: calc(var(--status-bar-height) + 22rpx);
		right: 48rpx;
		color: #fff;

		image {
			width: 32.99rpx;
			margin-right: 6rpx;
			height: 34rpx;
		}
	}

	.s_banxin {
		position: fixed;
		top: calc(var(--status-bar-height) + 44px);
		width: 100%;
		padding: 0 48rpx;
		background-color: #E23C63;
		height: 44px;
		z-index: 999;

		.search {
			width: 100%;
			background-color: #fff;
			border-radius: 30rpx;
			padding: 14rpx 0 14rpx 30rpx;
			height: 60rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 12rpx;
			}
		}

	}

	.rm_tj {
		width: 100%;
		height: 44px;
		padding: 0 48rpx;
		position: absolute;
		background-color: #E23C63;
		z-index: 9999;
		top: calc(var(--status-bar-height) + 88px);
		color: #FFFFFF;
		font-size: 22rpx;
		line-height: 32rpx;
		z-index: 998;
		.left {
			width: 133.34rpx;
			height: 31.87rpx;
		}

		.right {
			width: 8.14rpx;
			height: 13.76rpx;
		}
	}

	.content {
		padding-top: calc(var(--status-bar-height) + 132px);
		width: 100%;
		position: relative;
		z-index: 99;

		.bg {
			height: 160rpx;
			position: absolute;
			z-index: -1;
			background-color: #E23C63;
			width: 100%;
		}

		.top_tj {


			.tj_xx {
				width: 220rpx;
				margin-bottom: 36rpx;
				height: 270rpx;
				background-color: #fff;
				margin-right: 20rpx;
				border-radius: 20rpx;
				box-shadow: 0rpx 6rpx 24rpx rgba(30, 19, 6, 0.05);

				.tx {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-bottom: 6rpx;
				}

				.title {
					font-size: 28rpx;
					line-height: 40rpx;
					margin-bottom: 14rpx;
				}

				.tj_btn {
					width: 100%;
					margin-bottom: 14rpx;
					padding: 0 12rpx;

					.an_niu {
						width: 100rpx;
						height: 30rpx;
						border-radius: 4rpx;
						font-size: 18rpx;
						line-height: 26rpx;
						background-color: #FDF8FE;
						color: #BBBBBB;
					}
				}

				.shang {
					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 6rpx;
					}

					.num {
						font-size: 34rpx;
						line-height: 48rpx;
						color: #E23C63;

					}

				}
			}

		}

		.mid_img {
			width: 100%;
			height: 200rpx;
			border-radius: 20rpx;
		}

		.b_list {
			width: 100%;
			padding: 24rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 6rpx 24rpx rgba(34, 34, 34, 0.05);

			.tx {
				width: 108rpx;
				height: 108rpx;
				margin-right: 24rpx;
				border-radius: 50%;
			}

			.title {
				font-size: 28rpx;
				line-height: 40rpx;
				margin-bottom: 14rpx;
			}

			.num {
				font-size: 34rpx;
				line-height: 48rpx;
				color: #E23C63;
			}

			.shang {
				width: 30rpx;
				height: 30rpx;
				margin-right: 6rpx;
			}

			.h_btn {
				width: 122rpx;
				height: 36rpx;
				border-radius: 4rpx;
				background-color: #FDF8FE;
				color: #BBBBBB;
				font-size: 22rpx;
				line-height: 32rpx;

			}

			.h_text {
				color: #BBBBBB;
				line-height: 34rpx;
				font-size: 24rpx;
			}
		}
	}

	.content .b_list:last-child {
		margin-bottom: 112rpx;
	}
</style>
